<template>
  <div>
    <listLayoutVue>
      <template #title>全部指令</template>
      <template #operation>
        <router-link v-permission="'instruct/add'" :to="{ name: 'all_createDirective', query: { f: 'create' } }">
          <Button type="primary" @click="handleCreateDirective">新建指令</Button>
        </router-link>
      </template>

      <template #form>
        <Form class="custom-ivu-form" inline :label-width="80" @submit.native.prevent="handleFormSubmit">
          <FormItem label="指令来源">
            <Select
              v-model="formData.source"
              class="form-item--width"
              element-id="select2"
              clearable
              @on-change="handleFormSubmit"
            >
              <Option v-for="(nt, i) of directiveSource" :key="i" :value="nt.key">{{ nt.value }}</Option>
            </Select>
          </FormItem>

          <FormItem label="关键词">
            <Input
              v-model="formData.keyword"
              :label-width="60"
              placeholder="请输入"
              class="form-item--width"
              size="large"
              clearable
            ></Input>
          </FormItem>

          <FormItem label="指令类型">
            <Select
              v-model="formData.type"
              class="form-item--width"
              element-id="select2"
              clearable
              @on-change="handleFormSubmit"
            >
              <Option v-for="(nt, i) of directiveType" :key="i" :value="nt.key">{{ nt.value }}</Option>
            </Select>
          </FormItem>

          <!-- <FormItem label="指令状态">
            <Select
              v-model="formData.state"
              class="form-item--width"
              element-id="select2"
              clearable
              @on-change="handleFormSubmit"
            >
              <Option v-for="(nt, i) of directiveState" :key="i" :value="nt.key">{{ nt.value }}</Option>
            </Select>
          </FormItem> -->

          <FormItem label="指令状态">
            <Select v-model="formData.state" class="form-item--width" clearable @on-change="handleFormSubmit">
              <Option v-for="(nt, i) of directiveStates" :key="i" :value="nt.key">{{ nt.value }}</Option>
            </Select>
          </FormItem>

          <FormItem label="下发时间" class="width-auto" style="min-width: 30%">
            <TimeRange
              v-model="formData.timeType"
              @on-time-type-change="handleTimeTypeChange"
              @on-date-range-change="handleTimeRange"
            />
          </FormItem>

          <Button class="btn-search" type="primary" html-type="submit">查询</Button>
        </Form>
      </template>

      <template #table>
        <div class="list-caption f16">指令列表</div>

        <CommonTablePage
          :loading="tableLoading"
          :current="formData.pageNo"
          :columns="columns"
          :tableData="tableData"
          :total="pagination.total"
          @on-change="handlePageChange"
          @on-page-size-change="handlePageSizeChange"
        ></CommonTablePage>
      </template>
    </listLayoutVue>

    <ModalConfrim :visible.sync="visible.abort" title="终止" :show-footer="false" @on-ok="modalAbortOk">
      <p class="text-center f14">是否终止？</p>
    </ModalConfrim>
  </div>
</template>

<script>
// components
import listLayoutVue from '@/components/listLayout/listLayout.vue'
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
import ModalConfrim from '@/components/common/ModalConfrim/ModalConfrim'
import TimeRange from '@/components/customFrom/TimeRange'
//util
import { createCommonPagination } from '@/utils/service.js'
import { createColumns } from './service'
import { createForm } from './../service'
// vuex
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('manageEnd')
// mixin
import mixin from './mixin'

export default {
  name: 'AllDirective',

  mixins: [mixin],

  components: { listLayoutVue, CommonTablePage, ModalConfrim, TimeRange },

  data() {
    return {
      formData: createForm(''),
      directiveStates: [],

      tableLoading: false,
      columns: createColumns(this),
      tableData: [],
      currentAbortItems: [],

      pagination: createCommonPagination(),

      visible: {
        abort: false,
      },
    }
  },

  computed: {
    directiveSource() {
      return this.$store.getters['manageEnd/directiveSource']
    },
    directiveType() {
      return this.$store.getters['manageEnd/directiveType']
    },
    /* directiveState() {
      return this.$store.getters['manageEnd/directiveState']
    }, */
  },

  methods: {
    ...mapActions(['getSources', 'getDirectiveTypes']),

    handleCreateDirective() {
      console.log('handleCreateDirect')
    },

    handleTimeRange(date) {
      this.formData.startTime = date[0]
      this.formData.endTime = date[1]
      this.handleFormSubmit()
    },

    handleTimeTypeChange(v) {
      if (v === '自定义') {
      } else {
        this.formData.startTime = ''
        this.formData.endTime = ''
        this.handleFormSubmit()
      }
    },

    handleFormSubmit(no_reset) {
      if (no_reset !== true) {
        this.formData.pageNo = 1
      }
      this.getAllDirectiveList({ ...this.formData })
    },

    toDetails(row) {
      // console.log(row)
      let name = ''
      if (row.detailStyle === 'PAGE') {
        name = 'directiveExecuteStatus'
      } else if (row.detailStyle === 'LIST') {
        name = 'directiveReshipDetails'
      }
      this.$router.push({ name, query: { id: row.id } })
    },

    handleAbort(row) {
      // console.log(row)
      this.currentAbortItems = [row]
      this.visible.abort = true
    },

    handlePageChange(page) {
      this.formData.pageNo = page
      this.handleFormSubmit(true)
    },
    handlePageSizeChange(pageSize) {
      this.formData.pageSize = pageSize
      this.handleFormSubmit(true)
    },

    modalAbortOk() {
      this.commandAbort(this.currentAbortItems.map((it) => it.id).join())
    },
  },

  mounted() {
    this.handleFormSubmit()
    this.getSources()
    this.getStateList()
    this.getDirectiveTypes()
  },
}
</script>

<style lang="less" scoped></style>
